<template>
  <div class="month-product-list">
    <div class="btnCopy space-between">
      <div class="paddingMine" style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
        <div>{{priceTotal.planTime}}{{priceTotal.draftName}}</div>
        <el-button type="primary" size="mini" @click="backMine">返回</el-button>
      </div>
    </div>
    <span>
      月计划总额<span style="font-size:18px;color:#ffc323">{{(priceTotal.monthPlanAmount || 0)/10000}}</span>
      万,月计划总量<span style="font-size:18px;color:#ffc323">{{(priceTotal.monthPlanCount || 0)/10000}}</span>
      万,上月计划总量<span style="font-size:18px;color:#ffc323">{{(priceTotal.lastMonthPlanCount || 0)/10000}}</span>
      万，上月计划总额<span style="font-size:18px;color:#ffc323">{{(priceTotal.lastMonthPlanAmount || 0)/10000}}</span>万
    </span>
    <div class="space-between" style="display: flex;margin-top: 20px">
      <el-form :inline="true" class="demo-form-inline single-form-inline planS" size="mini">
        <el-form-item label="品类">
          <el-select  size="mini" placeholder="请选择" v-model="firstCate" @change="allProduct">
            <el-option v-for="(item,index) in firstCateList"
                       :key="index" :label="item.categoryName" :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select  size="mini" placeholder="请选择" v-model="secondCate" @change="allProduct">
            <el-option v-for="(item,index) in secondCateList"
                       :key="index" :label="item.categoryName" :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="pName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" size="mini" @click="getDataMineSet(pName,secondCate=='全部'? firstCate:secondCate)">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-radio-group  size="mini" v-model="isNoPlan" @change="getDataMineSet(pName,secondCate=='全部'? firstCate:secondCate)">
          <el-radio-button label='2'>全部</el-radio-button>
          <el-radio-button label="0">只看有计划</el-radio-button>
          <el-radio-button label="1">只看无计划</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-table :data="twoPageTable" size="mini" style="width: 100%;margin-top:20px">
      <el-table-column
        prop="productCode"
        label="产品型号"
        width="180px">
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="所属品类">
      </el-table-column>
      <el-table-column
        prop="productType"
        label="组合类型">
      </el-table-column>
      <el-table-column
        prop="guidePrice"
        label="产品均价(元)"
        width="180px"
        sortable>
      </el-table-column>
      <el-table-column
        prop="planSalesNumber"
        sortable
        width="160px"
        label="年计划销量(件)">
      </el-table-column>
      <el-table-column
        prop="planSaleAmount"
        sortable
        label="年计划销额(元)">
      </el-table-column>
      <el-table-column
        prop="completionRateString"
        label="完成度"
        sortable>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="productBoxs = true;checkCharts(scope.row.productCode,currentYear)">销售趋势</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="proName" :visible.sync="productBoxs" width="45%">
      <div class="">
        <el-select size="mini" style="width: 100px" placeholder="请选择" v-model="monthYear" @change="checkCharts(proCode,monthYear)">
          <el-option v-for="(n,index) in 10" :key="index"
                     :label="currentYear-n+1" :value="currentYear-n+1">
          </el-option>
        </el-select>
        <el-radio-group  size="mini" v-model="sale" @change="saleSelect">
          <el-radio-button label='0'>销额</el-radio-button>
          <el-radio-button label="1">销量</el-radio-button>
        </el-radio-group>
        <div id="saleSummaryChartss" style="height: 300px;width:100%;margin:10px"></div>
      </div>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'
  import mixins from 'utils/mixin'

  export default {
    name: "month-product-list",
    mixins:[mixins.saleChart],
    data(){
      return{
        priceTotal: 0,
        sellTotal: 0,
        firstCate: '全部',
        firstCateList: [],
        secondCate: '全部',
        secondCateList: [],
        pName: undefined,
        twoPageTable: [],
        currentYear: new Date().getFullYear(),
        monthYear: new Date().getFullYear(),
        hasPlans: true,
        isNoPlan: 2,
        paramUrlSet: {}
      }
    },
    mounted(){
      this.paramUrlSet = this.$route.params
      this.getDataMineSet()
      this.getCategory()
      this.getSecondCategory()
    },
    methods:{
      backMine(){
        this.$router.back(-1)
      },
      allProduct(newVal){
        this.getSecondCategory()
        this.getDataMineSet(this.pName,newVal)
      },
      getCategory(){
        opreate.getFirstCateSet({}).then(res => {
          this.firstCateList = [ { categoryName:'全部', categoryId:'全部' }, ...res.data ]
        })
      },
      planSelect(hasPlans){
        this.hasPlans = '2' == hasPlans
      },
      getSecondCategory(){
        let categoryId = '全部' == this.firstCate ? undefined : this.firstCate
        opreate.getSecondCateSet({ categoryId }).then(res => {
          this.secondCateList = [ { categoryName:'全部',categoryId:'全部' }, ...res.data ]
        })
      },
      getDataMineSet(productName,categoryId){
        let { draftStatus, monthPlan } = this.paramUrlSet || {}
        opreate.getMonthPlan({
          monthPlanTime: monthPlan,
          productName: productName == ''? undefined: productName,
          categoryId: categoryId == '全部'? undefined: categoryId,
          draftStatus: draftStatus,
          isNoPlan: this.isNoPlan == '2'? undefined : this.isNoPlan
        }).then(res => {
          this.twoPageTable = res.data.list
          this.priceTotal = res.data
        })
      }
    },
    watch:{
      firstCate(newVal){
        this.secondCate = '全部'
      }
    }
  }
</script>
<style scoped>

</style>
